<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>11月18</title>
	<style>
	#hezi{
		width: 600px;
		height: 600px;
		margin: 0 auto;
		background-color: red;
		/*border: 5px solid black;*/        
		margin-top: 200px;
	}

	.zi{
		width: 500px;
		height: 500px;
		background-color: blue;
		float: right;
	}

	.xiao1{
		width: 100px;
		height: 100px;
		background-color: gray;
		margin: 10px;
		float: left;
	}

	.xiao2{
		width: 120px;
		height: 120px;
		background-color: gray;
		margin: 10px;
		float: left;
	}

	.xiao3{
		width: 100px;
		height: 100px;
		background-color: gray;
		margin: 10px;
		float: right;
	}

	.xiao4{
		width: 100px;
		height: 100px;
		background-color: gray;
		margin: 10px;
		float: left;
	}

	body{
		background-image:url(2.jpg);
		background-repeat: repeat-x;
		/*background-position: center;*/
	}
	/*关于定位开始*/
	.fu{
		width: 400px;
		height: 400px;
		background-color: red;
		position: absolute;
		top:0px;
		left: 0px;
	}

	.son1{
		width: 150px;
		height: 150px;
		background-color: gray;
		position: relative;
		left:50px;
		top:50px;
		/*z-index: 1;*/
	}
	
	.son2{
		width: 150px;
		height: 150px;
		background-color: green;
		position: absolute;
		left:0px;
		top:0px;
		/*z-index:0;*/
	}
	/*关于定位结束*/
	.pic{
		width:200px;
		height:100px;
		background-image: url(2.jpg); 		/*添加图片*/
		background-position: -90px -170px;		/*指定显示图片（-90px,-170px）的位置在pic的框里*/
	}

	/*半透明开始*/
	#banner{
		width: 350px;
		height: 350px;
		/*position: relative;*/
	}
	
	.banner_ad{
		width: 350px;
		height: 350px;
		/*position: relative;*/
	}

	.banner_ad img{
		width: 350px;
		height: 350px;
		position: absolute;
	}

	.category_brother{
		width: 200px;
		height: 350px;
		position: absolute;
		background: gray url() 0 0 no-repeat;
		opacity:0.8;
	}

	.category{
		width: 200px;
		height: 350px;
		position: absolute;
	}

	.list_item{
		width: 200px;
		height: 70px;
	}

	.category li{
		list-style: none;
	}

	.category a{
		text-decoration: none;
	}
	/*半透明结束*/
	</style>

</head>
<body>
	<div id="hezi">
		<div class="zi">
			<div class="xiao1">1</div>
			<div class="xiao2">2</div>
			<div class="xiao3">3</div>
			<div class="xiao4">4</div>
		</div>	
	</div>

	<div id="pic"></div>
	<div></div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div class="fu">
		<div class="son1">son1</div>
		<div class="son2">son2</div>
	</div>
	<br>
	<br>
	<br>
	<br>
	<div class="pic"></div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div id="banner">
		<div class="banner_ad"><img src="2.jpg" alt="">
			<div class="category_brother">
				<ul class="category">
					<li class="list_item"><a href="">手机 电话卡</a></li>
					<li class="list_item"><a href="">手机 电话卡</a></li>
					<li class="list_item"><a href="">手机 电话卡</a></li>
					<li class="list_item"><a href="">手机 电话卡</a></li>
					<li class="list_item"><a href="">手机 电话卡</a></li>
				</ul>
			</div>
		</div>
		
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

</body>
</html>